<template>
    <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
           <el-form-item label="部门名称" prop="deptName">
                <el-input v-model="ruleForm.deptName" placeholder="请输入部门名称"></el-input>
            </el-form-item>

            <el-form-item label="部门描述" prop="remark">
                <el-input type="textarea" v-model="ruleForm.remark" placeholder="请输入..."></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="warning" plain @click="submitForm('ruleForm')">更新部门</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "Upd",
    data() {
        return {
            ruleForm: {},
            rules: {
                deptName: [{required: true,message: "请输入部门名称",trigger: "blur"}],
                remark: [{required: true,message: "请描述部门",trigger: "blur",}]
            }
        }
    },
    model: {
        prop: "dialogFormVisible",
        event: "change",
    },
    props: {
        dialogFormVisible: Boolean,
        data: Object,
    },
    methods: {
        //提交表单
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.axios({
                        method: 'Put',
                        url: 'Department',
                        data: JSON.stringify(this.ruleForm),
                        headers: {
                            Authorization: sessionStorage.getItem('token'),
                            'Content-Type': 'application/json'
                        }
                    }).then(res => {
                        if (res.data.code>0) {
                            this.$notify({
                                title: '成功',
                                message: res.data.msg,
                                type: 'success'
                            });
                            this.$emit('refresh')
                            this.$emit("change", false);
                        } else {
                            this.$notify.error({
                                title: '错误',
                                message: res.data.msg
                            });
                        }
                    }).catch(err => {
                        console.log('err: ', err);
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    },
    watch: {
        dialogFormVisible(v) {
            if (v) this.ruleForm = JSON.parse(JSON.stringify(this.data));
        }
    },
    created() {
        this.ruleForm = JSON.parse(JSON.stringify(this.data));
    }
}
</script>